import React, { PureComponent } from 'react';
import { Table } from 'antd';
import { CircleChartsC } from '../../../../../comps';

export default class ChartsTableC extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      type: '',
    };
  }

  renderCharts() {
    const { dataPie } = this.props;

    dataPie.map((item) => {
      item.itemStyle = {
        emphasis: {
          labelLine: {
            show: true,
          },
          label: {
            show: true,
            fontSize: 14,
            formatter: (a) => {
              var str = `${a.name}\n${a.value}%`;
              return str;
            },
          },
          borderWidth: 0, //设置border的宽度有多大
        },
      };
    });

    return (
      <CircleChartsC
        data={dataPie}
        showLegend={false}
        height={300}
        width={450}
        type='ring'
        onEvents={(r) => {
          this.setState({
            type: r.name,
          });
        }}
      />
    );
  }
  renderTable = () => {
    const { dataObj } = this.props;
    const columns = dataObj.columns || [];

    columns.map((item) => {
      item.dataIndex = item.key;
      if (item.key == 'color') {
        item.width = 30;
        item.render = (text) => {
          return <span style={{ background: text, display: 'inline-block', width: '10px', height: '10px', borderRadius: '50%' }}></span>;
        };
      }
    });

    const dataSource = dataObj.dataSource || [];

    return (
      <div>
        <Table columns={columns} dataSource={dataSource} pagination={false} bordered={false} rowClassName={this.setRowClassName} rowKey='type' />
      </div>
    );
  };
  setRowClassName = (record) => {
    return record.type === this.state.type ? 'bgblue' : '';
  };

  render() {
    return (
      <div className='main_income'>
        <div>{this.renderCharts()}</div>
        <div>{this.renderTable()}</div>
      </div>
    );
  }
}
